<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{site_name}} - {{ filename }}</title>

    <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.min.css" type="text/css" media="screen" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
    <script src="http://ajaxorg.github.com/ace/build/src/ace.js"></script>
    <script src="{{STATIC_URL}}js/bcsocket.js"></script>  
    <script src="{{STATIC_URL}}js/webclient/share.js"></script>
    <script src="{{STATIC_URL}}js/webclient/ace.js"></script>  

    <style type="text/css" media="screen">
        #editor { 
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>

  </head>
  <body>
      {% if user.is_authenticated %}
        {% include "svn/chat/window.html"%}
         <button class="btn btn-primary" type="button" onclick="$('#chat').toggle();$('#chatnotification').attr('class', 'btn btn-primary'); $('#chatnotification').html('Chat Lobby');"style="position:fixed; bottom:0; right:0; width: 200px; z-index: 100"id="chatnotification">Chat Lobby</button>
      {% endif %}
    <div class="alert alert-success" style="display: none; position: fixed; top: 10%; left: 30%; z-index: 300" id = "save_notice">
        <button type="button" class="close" data-dismiss="alert">×</button>
              File successfully saved! Note: This is not committed to SVN.
    </div>
    <div id="container">
      <div id="editor">File Loaded. Trying to load collaborative editor. If this stays more than 10s, that means your browser does not support the editor.</div>
      
      <div id='panel' style= "position: relative; height: 100%; width: 30%; background:#272822; float: right; display:none; color: white; opacity: .4;">
          <h1>Welcome <strong>{{user.username}}</strong></h1>
          <hr>
          <h4>You are editing: <span id="language" class="label label-info">{{doctype}}</span><strong>{{filename}}</strong></h4>
          <div>You {% if writableAccess %}
                    have permission to modify this file.
                    {% else %}
                    don't have permission to modify this file. 
                    {% endif %}</div>
          <div class="input-prepend">
            <span class="add-on" style="color: black">Syntax</span>
              <select name="syntax" onchange="changeSyntax(this.value)">
                  <option value="c9search">C9Search</option><option value="coffee">CoffeeScript</option><option value="coldfusion">ColdFusion</option><option value="csharp">C#</option><option value="css">CSS</option><option value="diff">Diff</option><option value="glsl">Glsl</option><option value="golang">Go</option><option value="groovy">Groovy</option><option value="haxe">haXe</option><option value="html">HTML</option><option value="c_cpp">C/C++</option><option value="clojure">Clojure</option><option value="jade">Jade</option><option value="java">Java</option><option value="jsp">JSP</option><option value="javascript">JavaScript</option><option value="json">JSON</option><option value="jsx">JSX</option><option value="latex">LaTeX</option><option value="less">LESS</option><option value="liquid">Liquid</option><option value="lua">Lua</option><option value="luapage">LuaPage</option><option value="markdown">Markdown</option><option value="ocaml">OCaml</option><option value="perl">Perl</option><option value="pgsql">pgSQL</option><option value="php">PHP</option><option value="powershell">Powershell</option><option value="python">Python</option><option value="ruby">Ruby</option><option value="scad">OpenSCAD</option><option value="scala">Scala</option><option value="scss">SCSS</option><option value="sh">SH</option><option value="sql">SQL</option><option value="svg">SVG</option><option value="tcl">Tcl</option><option value="text">Text</option><option value="textile">Textile</option><option value="xml">XML</option><option value="xquery">XQuery</option><option value="yaml">YAML</option>
              </select>
          </div>

          <hr>
          {% if writableAccess %}
          <div class="btn-group">
            <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button" href="#">Reset Change</a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#" onclick="resetFile()">Confirm - All Changes will be erased</a></li>
                <li class="divider"></li>
                <li><a tabindex="-1" href="#">Cancel</a></li>
            </ul>
            <a class="btn btn-primary" type="button" onclick="save()">Save Change</a>
            <a href="#commitModal" class="btn btn-warning" data-toggle="modal" role="button">Commit to SVN</a>
          </div>
          <hr>

          {% endif %}
      </div>
      <!-- <div id='click' style="position: relative; height:25px; width:80px;background:#49483e; float:right; margin-top:0px;z-index:100; font-family: 'Monaco'; color: white; opacity: .4; padding: 2px; margin-right: 10px"> -->
        <!-- Options -->
      <!-- </div>​ -->
            <a id='click' href='#' onclick = "toggleName()" class='btn' style="height: 25px; width: 60px; position:relative; float:right; z-index:100; opacity: .4; padding:2px; margin-right: 10px">Options</a>
    </div>
    <script type="bogus" id="multi">{{rtval}}</script>
    <script>
        var editor = ace.edit("editor");
        function getCookie(e) {
            var t = null;
            if (document.cookie && document.cookie != "") {
                var n = document.cookie.split(";");
                for (var r = 0; r < n.length; r++) {
                    var i = jQuery.trim(n[r]);
                    if (i.substring(0, e.length + 1) == e + "=") {
                        t = decodeURIComponent(i.substring(e.length + 1));
                        break
                    }
                }
            }
            return t
        }
        function csrfSafeMethod(e) {
            return /^(GET|HEAD|OPTIONS|TRACE)$/.test(e)
        }
        {% if writableAccess %}

        function save() {
            var e = editor.getValue();
            $.ajax({
                type: "POST",
                url: "/svn/savefile/",
                data: {
                    content: e,
                    repoid: "{{repoid}}",
                    path: "{{filepath}}",
                    filename: "{{filename}}"
                }
            });
            save_notification = document.getElementById('save_notice').style.display = 'block'
            $('#save_notice').fadeOut(4000);
        }

        function commit() {
            var e = editor.getValue();
            $.ajax({
                type: "POST",
                url: "/svn/savefile/",
                data: {
                    content: e,
                    repoid: "{{repoid}}",
                    path: "{{filepath}}",
                    filename: "{{filename}}",
                    commit: document.getElementById('commit_message').value
                },
                success: function(msg){
                    if(msg=="")
                        document.getElementById('svn_message').innerHTML = "File no change!";
                    else
                        document.getElementById('svn_message').innerHTML = msg;
                        // $('#commitModal').modal('hide');
                }
            });
        }

        function resetFile() {
            $.ajax({
                type: "POST",
                url: "/svn/resetchange/",
                data: {
                    repoid: "{{ repoid }}",
                    path: "{{ filepath }}",
                    filename: "{{ filename }}"
                },
                async: false,
                success: function (e, t, n) {
                    sharejs.open("{{documentid}}", "text", "{{node_server}}", function (tai, docu) {
                        var r = docu.getText().length;
                        docu.del(0, r);
                        docu.insert(0, e);
                        //docu.attach_ace(editor);
                        document.location.reload(true)
                    })
                }
            })
        }

        editor.commands.addCommand({
            name: "save",
            bindKey: {
                win: "Ctrl-S",
                mac: "Command-S"
            },
            exec: function () {
                save()
            }
        });
        {% else %}
        editor.setReadOnly(true);
        {% endif %}
        function changeSyntax(e) {
            var t = document.getElementById("language");
            t.innerHTML = e;
            editor.getSession().setMode("ace/mode/" + e)
        }
        var decoded = $("<div/>").html($("#multi").html()).text();
        $("#click").click(function () {
            $("#panel").animate({
                width: "toggle"
            }, 500)
        });
        
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/{{doctype}}");
        var csrftoken = getCookie("csrftoken");
        $.ajaxSetup({
            crossDomain: false,
            beforeSend: function (e, t) {
                if (!csrfSafeMethod(t.type)) {
                    e.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });
        var codeConnection = sharejs.open("{{documentid}}", "text", "{{node_server}}", function (e, t) {
            if (t.created) {
                t.insert(0, decoded)
            }
            t.attach_ace(editor)
        })
    </script>
  </body>

<div id="commitModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Commit Change to SVN</h3>
  </div>
  <div class="modal-body">
    <div class="input-prepend">
        <span class="add-on">Commit Message</span>
        <input class="span4" id="commit_message" type="text" placeholder="Message">
    </div>
    <p id="svn_message"></p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-danger" onclick="commit()">Commit</button>
  </div>
</div>

</html>

<div id="spinner" class="spinner" style="display:none;">
 <div class="progress progress-striped active">
  <div class="bar" style="width: 100%;">Tell me a joke...</div>
</div>
</div>

<style>
.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -100px; /* half width of the spinner gif */
  margin-top: -40px; /* half height of the spinner gif */
  text-align:center;
  z-index:1234;
  overflow: auto;
  width: 200px; /* width of the spinner gif */
  height: 82px; /*hight of the spinner gif +2px to fix IE8 issue */
}

</style>
<script>
function toggleName(){
  clickButton = document.getElementById('click');
  if(clickButton.innerHTML == "Back"){
    clickButton.innerHTML = "Options";
  }else{
    clickButton.innerHTML = "Back";
  }
}
$(document).ready(function(){
  $("#spinner").bind("ajaxSend", function() {
    $(this).show();
  }).bind("ajaxStop", function() {
    $(this).hide();
  }).bind("ajaxError", function() {
    $(this).hide();
  });

     });

</script>
